<template>
	<!-- <div class="relative w-full h-full px-4" :class="`${prefixClass}`"> -->
	<div class="relative w-full h-full px-4" :class="`${'e9admin-login'}`">
		<div class="container relative h-full py-2 mx-auto sm:px-10">
			<div class="flex h-full">
				<div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
					<div class="my-auto">
						<img :alt="title" src="@/assets/images/login-page-bg-2.png" class="w-2/3 -mt-16 -enter-x" />
						<div class="mt-10 font-medium text-white -enter-x">
							<span class="inline-block mt-4 text-3xl">逸久快速交付平台</span>
						</div>
						<div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">快速搭建强大的后台管理系统</div>
					</div>
				</div>
				<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
					<!-- <div
						:class="`${prefixClass}-form`"
						class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
					> -->
					<div
						:class="`e9admin-login-form`"
						class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
					>
						<LoginForm />
						<!-- <ForgetPasswordForm />
						<RegisterForm />
						<MobileForm />
						<QrCodeForm />
						<RegisterFormByEmail /> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="Login">
import LoginForm from './components/login-form/index.vue';
</script>

<style lang="scss" scoped>
$prefix-cls: $namespace + '-login';

.#{$prefix-cls} {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	background-color: var(--color-bg-1);
	color: #000000d9;
	@media (max-width: $screen-xl) {
		background-color: #293146;
		.#{$prefix-cls}-form {
			background-color: var(--color-bg-1);
		}
	}
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin-left: -48%;
		background-image: url('@/assets/images/login-bg.svg');
		background-repeat: no-repeat;
		background-position: 100%;
		background-size: auto 100%;

		@media (max-width: $screen-xl) {
			display: none;
		}
	}
}
body[arco-theme='dark'] {
	.#{$prefix-cls} {
		@media (max-width: $screen-xl) {
			background-color: var(--color-bg-1);
		}
	}
}
</style>
